/*
定义了一个Vue.js指令，用于在页面上渲染LaTeX数学公式。
该指令利用了katex库来实现数学公式的渲染
 */
import 'katex' // 引入katex库，这是一个用于渲染LaTeX数学公式的JavaScript库。
import renderMathInElement from 'katex/contrib/auto-render/auto-render' // 引入auto-render模块，这是一个用于自动渲染LaTeX数学公式的模块。
import 'katex/dist/katex.min.css' // 引入katex的样式文件，用于设置数学公式的样式。

function _ () { // 定义了一个空函数，用于处理katex渲染出错的情况
}

const defaultOptions = { // 定义默认的katex渲染选项
  errorCallback: _,  //  当渲染出错时的回调函数
  throwOnError: false, // 是否在渲染出错时抛出错误
  delimiters: [ // 定义LaTeX数学公式的分隔符
    {left: '$', right: '$', display: false},
    {left: '$$', right: '$$', display: true},
    {left: '\\[', right: '\\]', display: true},
    {left: '\\(', right: '\\)', display: false}
  ],
  ignoredTags:["script", "noscript", "style", "textarea", "code", "option",], // 定义不需要渲染的HTML标签
}

function render (el, binding) { // 定义了一个函数，用于在页面上渲染LaTeX数学公式
  let options = {} // 定义一个空对象，用于存储katex的渲染选项
  if (binding.value) { // 如果指令绑定的值存在
    options = binding.value.options || {} // 将指令绑定的值中的options属性赋值给options对象
  }
  Object.assign(options, defaultOptions) // 将默认的katex渲染选项合并到options对象中
  renderMathInElement(el, options) // 使用auto-render模块在el元素中渲染LaTeX数学公式，使用options对象中的选项
}

export default { // 导出一个对象，该对象包含一个install方法，用于将指令注册到Vue.js中
  install: function (Vue, options) {
    Vue.directive('katex', { // 注册一个名为katex的自定义指令
      bind: render, // 当指令第一次绑定到元素上时调用render函数
      componentUpdated: render // 当指令所在的组件更新时调用render函数
    })
  }
}
